Flexbox属性介绍

介绍

flexbox是HTML5中提出的新的布局方式。
使用时，需要将父子节点的display都设置为flex。
每个参赛的效果可以参考这里

父节点属性

flex-direction

控制子界点的方向。一共有4个值：

.container {
  flex-direction: row;   // default 从左往右，靠父节点左边
  flex-direction: row-reverse;  // 从右往左，靠父节点右边
  flex-direction: column;  //  从上往下，靠父节点顶部
  flex-direction: column-reverse;   //  从下往上，靠父节点底部
}

flex-wrap

控制子元素是否是现在在一行中。如果设置为显示到一行中，但是子元素的宽度和大于父节点宽度，那么子元素会对应缩小。

.container {
  flex-wrap: nowrap;  // default 显示到一行中
  flex-wrap: wrap;   //  多行显示，行顺序顺序显示
  flex-wrap: wrap-reverse;   //  多行显示，行顺序倒序显示
}

flex-flow

flex-direction和flex-wrap两个的简写。

flex-flow: [flex-direction] [flex-wrap]

align-items

控制子元素的上下对齐方式。一共有5个值。

.container {
  align-items: flex-start;   // 容器顶部对齐
  align-items: flex-end;   // 容器底部对齐
  align-items: center;   //  中间对齐
  align-items: baseline;   // 子元素文字baseline对齐
  align-items: stretch;   // 上下对齐，会改变子容器的高度
}

justfy-content

父容器同向多余空间的展示方式。有6个值。

.container {
  justfy-content: flex-start;   // 子元素靠前，多余空间靠后
  justfy-content: flex-end;   // 子元素靠后，多余空间靠前
  justfy-content: center;   // 子元素剧中，多余空间平均放前后
  justfy-content: space-between;   // 多余空间放子元素中间
  justfy-content: space-around;    // 多余空间环绕元素周边
}

align-content

类似于justfy-content， 管理父容器垂直方向多余空间的展示。6个值。

.container {
   align-content: flex-start;   // 子元素靠前，
   align-content: flex-end;   // 子元素靠后
   align-content: center;   // 子元素居中，多余空间放前后
   align-content: stretch;   // 子元素铺满整个父容器
   align-content: space-between;   // 多余空间放子元素中间
   align-content: space-round;   // 多余空间环绕元素周边
}

子节点属性

algin-self

同algin-item，不过algin-self是作用于子元素自己。应该有6个值

.item {
  align-self: auto;   // default 默认模式，按照父节点的algin-item来显示
  align-self: flex-start;  // 顶部对齐
  align-self: flex-end;  // 底部对齐
  align-self: center;  // 居中对齐
  align-self: baseline;  // baseline对齐
  align-self: stretch;  // 填充满
}

flex-grow

子元素间的大小比例。

.item {
  width: 100px;
}
.item01 {
  flex-grow: 1;
}
.item02 {
  flex-grow: 2;
}

flex-shrink

超出父容易后的收缩比率。 举个例子：父容器400px；有三个子元素，都是200px；当设置第三个子元素flex-shrink为3时，子元素的收缩比率就是1:1:3。
一共超出父元素200px;那么收缩的比率是40px:40px:120px; 也就是说子元素的实际展示宽是160px, 160px, 80px。

.container {
  width: 400px; 
}
.item {
  width: 200px;
}
.item03 {
  flex-shrink: 3;
}

flex-basis

如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间

.item {
  flex-basis: 10px;
}

flex

flex-grow, flex-shrink, flex-basis三者的简写。

.item {
  flex-grow: [flex-grow] [flex-shrink] [flex-basis];
}

order

控制子元素的顺序。order会改变子元素排序的先后。

.item01 {
  order: 2;
}
.item02 {
  order: 1;
}